import {Box, BoxProps, CircularProgress, Fade, Paper} from "@mui/material";
import {FC, ReactNode, useEffect, useState} from "react";


interface DGFadeViewProps extends BoxProps {
    children?: ReactNode,
    time?: number,
    load?: boolean,
    autoLoad?: boolean,
}

const DGFadeView: FC<DGFadeViewProps> = ({children, time, load, autoLoad, ...other}) => {
    // 加载状态
    const [loading, setLoading] = useState<undefined | boolean>(undefined);


    useEffect(() => {
        setLoading(load);
    }, [load]);

    useEffect(() => {
        if (load && autoLoad) setTimeout(() => setLoading(false), 500);
    }, [autoLoad, load]);


    const ContentView = load === undefined ? (<Box {...other}>{children}</Box>) : (<>


        {/* 加载状态 */}
        {loading && <Box style={{
            margin: "15px",
            display: "flex",
            flexDirection: "column",
            gap: "10px",
            alignItems: "center",
            minHeight: "50vh",
            justifyContent: "center"
        }}><CircularProgress/></Box>}


        {/* 渐变 */}
        {!loading && <Fade in={true} style={{
            background: "none", boxShadow: "none", transformOrigin: '50% 0 0'
        }} {...{timeout: time}}>
            <Paper sx={{background: "none", boxShadow: "none", boxShadowOffsetX: 0, boxShadowOffsetY: 0}}>
                <Box {...other}>{children}</Box>
            </Paper>
        </Fade>}

    </>)


    return (<Fade in={true} style={{
        background: "none",
        boxShadow: "none",
        transformOrigin: '50% 0 0'
    }} {...{timeout: time}}>
        <Paper sx={{
            background: "none",
            boxShadow: "none",
            boxShadowOffsetX: 0,
            boxShadowOffsetY: 0
        }}>
            {ContentView}

        </Paper>
    </Fade>);
}
export default DGFadeView;